<template>
	<view class="container">
		<image src="/static/login/loginbg.png" class="bg"></image>
		<view class="title-area">
			<view class="arrow" @click="toBack">
			</view>
			<view class="title-text">
				优惠券
			</view>
		</view>
		<view class="coupon-content-area">
			<view class="coupon-content" v-for="num in 3" key="num">
				<image src="/static/wash-car/couponbg.png" mode="" class="couponbg"></image>
				<view class="coupon-content-detail">
					<view class="detail-top">
						<view class="detail-top-left">
							<view class="use-shop">
								仅限于xx加油站使用
							</view>
							<view class="use-money">
								满200元可使用
							</view>
						</view>
						<view class="detail-top-right">
							<text class="money-symbol">¥</text><text class="money-num">20</text>
						</view>
					</view>
					<view class="detail-bottom">
						<view class="balidity-period">
							有效期至: 2020.04.11-2023.05.11
						</view>
						<view class="touse-area">
							<view class="touse-text">
								去使用
							</view>
							<view class="right-arrow">
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const toBack = () => {
		uni.navigateBack()
	}
</script>

<style scoped>
	.container {
		background-color: #eee;
		position: relative;
		z-index: 1;
		padding: 20rpx 20rpx 140rpx 20rpx;
		height: 100vh;
	}

	.bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		height: 400rpx;
	}

	.title-area {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx 40rpx 20rpx;
		font-size: 34rpx;
		color: #FFFFFF;
	}

	.arrow {
		width: 14rpx;
		height: 14rpx;
		border-left-style: solid;
		border-left-width: 2rpx;
		border-bottom-style: solid;
		border-bottom-width: 2rpx;
		transform: rotate(45deg);
	}
	.title-text {
		flex-grow: 1;
		display: flex;
		justify-content: center;
	}

	.coupon-content-area{
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		padding: 30rpx;
		height: 100vh;
		border-radius: 30rpx;
		
	}
	.coupon-content{
		position: relative;
		width: 100%;
		margin-bottom: 30rpx; 
	}
	.couponbg{
		width: 100%;
		height: 250rpx;
		position: relative;
		left: 0;
		z-index: 1;
	}
	.coupon-content-detail{
		width: 100%; 
		height: 250rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		color: #FFFFFF;
		
	}
	.detail-top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		border-bottom: #FFFFFF solid 1rpx;
	}
	.use-shop{
		font-size: 24rpx;
	}
	.use-money{
		font-weight: bold;
		padding: 20rpx 0;
		font-size: 30rpx;
	}
	
	.money-symbol{
		font-size: 24rpx;
	}
	.money-num{
		font-size: 50rpx;
		font-weight: bold;
	}
	
	.detail-bottom{
		display: flex;
		font-size: 24rpx;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 40rpx;
	}
	.touse-area{
		display: flex;
		align-items: center;
	}
	.right-arrow{
		width: 12rpx;
		height: 12rpx;
		border-right-style: solid;
		border-right-width: 2rpx;
		border-top-style: solid;
		border-top-width: 2rpx;
		border-color: white;
		transform: rotate(45deg);
	}

	
</style>